<template>
	<view class="content">
		<view class="bg_img"></view>
		<!-- 		<image class="bg_img" :src="$IMG_URL + '/imgs/poster/invite_poster.png'" mode=""></image>-->
		<view class="poster-box y-f">
			<image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
			<view class="share-box df-yc my20" v-if="poster.finalPath">
				<text class="fs24 text" style="color:#5F6F80;margin:40rpx 0 56rpx 0;">好友扫码注册成为会员，你将获得积分奖励</text>
				<view class="share-list-box x-f">
					<!-- #ifdef MP-WEIXIN -->
					<button class="share-btn share-item y-f" open-type="share">
						<!-- <image class="share-img" :src="$IMG_URL + '/imgs/share_wx.png'" mode=""></image> -->
						<button style="background-color: #2AB153;" class="icon df-c">
							<u-icon name="weixin-fill" color="#ffffff" size="54"></u-icon>
						</button>
						<text class="share-title fb mt20">微信好友</text>
					</button>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<view class="share-item y-f" @tap="share">
						<button style="background-color: #2AB153;" class="icon df-c">
							<u-icon name="weixin-fill" color="#ffffff" size="54"></u-icon>
						</button>
						<!-- <image class="share-img" :src="$IMG_URL + '/imgs/share_wx.png'" mode=""></image> -->
						<text class="share-title fb mt20">微信好友</text>
					</view>
					<!-- #endif -->
					<view class="share-item y-f" @tap="saveImage">
						<button style="background-color: #BE915C;" class="icon df-c">
							<u-icon name="download" color="#ffffff" size="54"></u-icon>
						</button>
						<text class="share-title fb mt20">保存图片</text>
					</view>
					<!-- <view class="share-item y-f" @tap="copyLink">
						<image class="share-img" :src="$IMG_URL + '/imgs/share_link.png'" mode=""></image>
						<text class="share-title">复制链接</text>
					</view> -->
				</view>
			</view>
		</view>
		<view class="hideCanvasView">
			<canvas class="hideCanvas" canvas-id="invite_poster"
				:style="{ width: (poster.width || 1) + 'px', height: (poster.height || 1) + 'px' }"></canvas>
		</view>

	</view>
</template>

<script>
	import _app from '@/common/utils/QS-SharePoster/app.js';
	import {
		getSharePoster
	} from '@/common/utils/QS-SharePoster/QS-SharePoster.js';
	import {
		BASE_URL
	} from '@/env.js';
	// #ifdef H5
	import wxsdk from '@/common/wechat/sdk';
	// #endif
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	import shoproShare from '@/common/mixins/shopro-share';
	export default {
		components: {

		},
		mixins: ['shoproShare'],
		data() {
			return {
				poster: {},
				qrShow: false,
				canvasId: 'invite_poster',
				showShareGuide: false
			};
		},
		props: {},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				//shareData: state => state.init.initData.share
			})
		},
		created() {
			let that = this;
			that.setShareInfo();
			if (that.shareInfo) {
				setTimeout(function() {
					that.$emit('getShareInfo', that.shareInfo);
					that.scene = encodeURIComponent(that.shareInfo.path.split('?')[1]);
					that.shareFc();
				}, 100);
			}
		},
		destroyed() {
			console.log("组件销毁")
		},
		methods: {
			beautySub(str, len) {
				var reg = /[\u4e00-\u9fa5]/g, //专业匹配中文
					slice = str.substring(0, len),
					chineseCharNum = (~~(slice.match(reg) && slice.match(reg).length)),
					realen = slice.length * 2 - chineseCharNum;
				return str.substr(0, realen) + (realen < str.length ? "..." : "");
			},
			async shareFc() {
				let that = this;
				try {
					// console.log('准备生成:' + new Date());
					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						// type: 'invitePoster',
						//backgroundImage: that.$tools.checkImgHttp(that.shareData.user_poster_bg), //接口返回的背景图
						formData: {
							//访问接口获取背景图携带自定义数据
						},
						posterCanvasId: this.canvasId, //canvasId
						delayTimeScale: 20, //延时系数
						/* background: {
								width: 1080,
								height: 1920,
								backgroundColor: '#666'
							}, */
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.042;
							const lineHeight = bgObj.height * 0.04;
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs([
									// {
									// 	type: 'custom',
									// 	setDraw(Context) {
									// 		Context.setFillStyle('black');
									// 		Context.setGlobalAlpha(1);
									// 		Context.fillRect(0, bgObj.height - bgObj.height * 0.2, bgObj.width, bgObj.height * 0.2);
									// 		Context.setGlobalAlpha(1);
									// 	}
									// },
									{
										type: 'image', //头像
										url: that.$tools.checkImgHttp(that.userInfo
											.avatar),
										alpha: 1,
										dy: bgObj.width * 1.35,
										infoCallBack(imageInfo) {
											let scale = (bgObj.width * 0.14) / imageInfo
												.height;
											return {
												circleSet: {
													x: (imageInfo.width * scale) / 2,
													y: (bgObj.width * 0.14) / 2,
													r: (bgObj.width * 0.14) / 2
												}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
												dWidth: imageInfo.width *
													scale, // 因为设置了圆形图片 所以要乘以2
												dHeight: bgObj.width * 0.14,
												dx: bgObj.width * 0.1

												/* roundRectSet: { // 圆角矩形
														r: imageInfo.width * .1
													} */
											};
										}
									},
									{
										type: 'text', //昵称
										// fontStyle: 'italic',//倾斜
										text: that.userInfo.nickname,
										size: fontSize,
										color: 'black',
										alpha: 1,
										textAlign: 'middle',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											if (textLength > 200) {
												this.text = that.beautySub(this.text, 8)
											}
											_app.log(
												'index页面的text的infocallback ，textlength:' +
												textLength);
											return {
												// dx: bgObj.width * 0.5 - textLength * 0.5,居中
												dx: bgObj.width * 0.26,
												dy: bgObj.width * 1.4
											};
										},
										serialNum: 0,
										id: 'tag1' //自定义标识
									},
									{
										type: 'text', //昵称
										// fontStyle: 'italic',//倾斜
										text: "邀请你加入每日竞速赛",
										size: fontSize * 0.8,
										color: '#E3AB6E',
										alpha: 1,
										textAlign: 'middle',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												// dx: bgObj.width * 0.5 - textLength * 0.5,居中
												dx: bgObj.width * 0.26,
												dy: bgObj.width * 1.45
											};
										},
										serialNum: 0,
										id: 'tag2' //自定义标识
									},
									// #ifdef MP-WEIXIN
									{
										type: 'image', //微信小程序码
										url: `${that.$API_URL}wechat/wxacode?scene=${that.scene}`,
										alpha: 1,
										drawDelayTime: 500, //draw延时时间
										dx: bgObj.width * 0.5 - (bgObj.width * 0.26) / 2,
										dy: bgObj.width * 0.855,
										infoCallBack(imageInfo) {
											return {
												dWidth: bgObj.width * 0.26,
												dHeight: bgObj.width * 0.26
												// roundRectSet: { // 圆角矩形
												// 	r: imageInfo.width * 0.025
												// }
											};
										}
									},
									// #endif
									// #ifndef  MP-WEIXIN
									{
										type: 'qrcode',
										text: that.shareInfo.path,
										size: bgObj.width * 0.26,
										dx: bgObj.width * 0.5 - (bgObj.width * 0.26) / 2,
										dy: bgObj.width * 0.855
									}
									// #endif
								]);
							});
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => {
							// 为动态设置画布宽高的方法，
							this.poster = bgObj;
						}
					});
					// console.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath);
					// this.poster.finalPath = d.poster.tempFilePath;
					this.$set(this.poster, 'finalPath', d.poster.tempFilePath);
					if(d.poster.errMsg=='canvasToTempFilePath:ok'){
						this.$store.commit('updateOnPosterStatus',1)
					}
					this.qrShow = true;
				} catch (e) {
					this.$store.commit('updateOnPosterStatus',1)
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
					console.log(JSON.stringify(e));
				}
			},
			async saveImage() {
				let that = this;
				let platform = uni.getStorageSync('platform');
				let checkPermission = await that.$tools.checkAppAlbum();
				if (platform === 'wxOfficialAccount') {
					that.$tools.toast('长按图片保存');
				} else if (checkPermission) {
					uni.saveImageToPhotosAlbum({
						filePath: that.poster.finalPath,
						success: res => {
							that.$tools.toast('保存成功');
						},
						fail: err => {
							that.$tools.toast('保存失败');
						}
					});
				}
			},
			share() {
				let that = this;
				// #ifdef APP-PLUS
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					href: that.shareInfo.path,
					title: that.shareInfo.title,
					summary: that.shareInfo.title,
					imageUrl: that.shareInfo.imageUrl,
					success: res => {
						console.log('success:' + JSON.stringify(res));
					},
					fail: err => {
						console.log('fail:' + JSON.stringify(err));
					}
				});
				// #endif

				// #ifdef H5
				that.showShareGuide = true;
				// #endif
			},
			copyLink() {
				let that = this;
				uni.setClipboardData({
					data: that.shareInfo.copyLink,
					success: () => {
						//#ifdef H5
						that.$tools.toast('已复制到剪贴板');
						//#endif
					}
				});
			},
			hideQr() {
				this.qrShow = false;
			}
		}
	};
</script>

<style lang="scss">
	.hideCanvasView {
		position: relative;
	}

	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}

	.content {
		position: relative;
		width: 100%;
		height: 1350rpx;

		.bg_img {
			width: 100%;
			height: 100%;
		}

		.poster-box {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 50rpx;

			.posterImage {
				width: 660rpx;
			}
		}
	}

	.share-box {
		width: 690rpx;
		height: 310rpx;
		background: #FFFFFF;
		box-shadow: 0px 15rpx 59rpx 0px rgba(153, 153, 153, 0.2);
		border-radius: 20rpx;

		.share-list-box {
			width: 100%;

			.share-btn {
				background: none;
				border: none;
				line-height: 1;
				padding: 0;

				&::after {
					border: none;
				}
			}

			.share-item {
				flex: 1;
				padding-bottom: 20rpx;

				button {
					width: 88rpx;
					height: 88rpx;
					background: #BE915C;
					border-radius: 50%;
				}

				button::after {
					border: none;
				}

				.share-img {
					width: 70rpx;
					height: 70rpx;
					background: red;
					border-radius: 50%;
					margin-bottom: 20rpx;
				}

				.share-title {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
</style>
